<template>
  <t-table
    row-key="index"
    table-layout="auto"
    class="plugin-reports-goods-table"
    :data="page.list"
    :columns="columns"
    :loading="page.loading"
    :pagination="page"
    @page-change="({ current }) => emit('change', current)"
    hover
  >
    <template #index="{ rowIndex }">
      <t-tag variant="light" theme="primary" shape="round">
        {{ (page.pageSize * (page.current - 1)) + (rowIndex + 1) }}
      </t-tag>
    </template>
    <template #code="{ row }">
      {{ goods[row.id]?.code ?? '' }}
    </template>
    <template #goods="{ row }">
      <b>{{ goods[row.id]?.name ?? '' }}</b>
    </template>
    <template #count="{ row }">
      {{ row.c ?? 0 }}
    </template>
    <template #goods_count="{ row }">
      {{ row.gc ?? 0 }}
    </template>
    <template #profit_money="{ row }">
      {{ app.money.format(row.pm) }}
    </template>
    <template #money="{ row }">
      <b>{{ app.money.format(row.m) }}</b>
    </template>
  </t-table>
</template>
<script setup>
  import app from '@/app'
  import index from '../../index'

  const props = defineProps(['goods', 'page'])
  const emit = defineEmits(['change'])
  const plugin = index.plugin
  const columns = [{
    colKey: 'index',
    cell: 'index'
  }, {
    title: plugin.t('goods.code'),
    colKey: 'code',
    cell: 'code'
  }, {
    title: plugin.t('goods.goods'),
    colKey: 'goods',
    cell: 'goods'
  }, {
    title: plugin.t('goods.count'),
    colKey: 'count',
    cell: 'count'
  }, {
    title: plugin.t('goods.goods_count'),
    colKey: 'goods_count',
    cell: 'goods_count'
  }, {
    title: plugin.t('goods.profit_money'),
    colKey: 'profit_money',
    cell: 'profit_money'
  }, {
    title: plugin.t('goods.money'),
    colKey: 'money',
    align: 'right',
    fixed: 'right',
  }]
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-reports-goods-table{
    .time{
      color: $color-content;
    }
    .total{
      color: $color;
      font-weight: bold;
    }
  }
</style>